<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		div#box {
			text-align:center;
		}
		div#box div#btn{
			margin:auto;
			width: 50px;
			height: 50px;
			line-height: 50px;
			background-color:#ddd ;
			border-radius:100% ;
			color:#fff ;
			cursor:pointer;
		}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="btn">开</div>
			<img id="img" src="img/pic_bulboff.gif" alt=""/>
		</div>
		<script>
		     (function(){
		     	var bth = document.querySelector("#btn");
		     	var img = document.querySelector("#img");
		     	btn.onclick =function(){
		     		console.log("this;",this);
		     		if(this.innerHTML=="开"){
		     			img.src="img/pic_bulbon.gif";
		     			this.innerHTML="关";
		     			this.style.backgroundColor="green";
		     		}else{
		     			img.src="img/pic_bulboff.gif";
		     			this.innerHTML="开";
		     			this.style.backgroundColor="#ddd";
		     		}
		     	}
		     }());
		</script>     
	</body>
</html>
